<template>
  <el-card shadow="always">
    <div class="flex flex-col justify-center items-center">
      <el-result
          icon="success"
          title="提交成功"
          sub-title="提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，使用 Message 全局提示反馈即可。灰色区域可以显示一些补充的信息。"
      >
        <template #extra>
          <div class="flex flex-col justify-between space-y-10">
            <div class="">
              <el-button type="primary">返回修改</el-button>
              <el-button>查看</el-button>
              <el-button>打印</el-button>
            </div>
          </div>
        </template>
      </el-result>

      <el-steps style="max-width: 600px" :active="active" finish-status="success">
        <el-step title="Step 1" description="Some description" />
        <el-step title="Step 2" description="Some description" />
        <el-step title="Step 3" description="Some description" />
      </el-steps>

      <el-button style="margin-top: 12px" @click="next">Next step</el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const active = ref(0)

const next = () => {
  if (active.value++ > 2) active.value = 0
}
</script>

<style scoped lang="scss">

</style>
